// 自定义绑定事件标准格式

// 自定义事件组件
import React from 'react'

export default class BindEvent extends React.Component{
    constructor() {
        super();
        this.state = {
            msg: "this is my`msg"
        }
    }
    // render属于生命周期函数.
    render() {
        return <div>
            BindEvent 组件
            <hr/>
            {/* react中的事件绑定机制, 事件名, 是小驼峰命名 */}
            {/* 调用自己的方法,需要使用this */}
            <button onClick={() => {this.clickM('鱼')}}>按钮</button>
            <h3>{this.state.msg}</h3>
            {/* 单向绑定 */}
            {/* 如果不提供onchange函数,则其为只读属性 */}
            {/* 要么提供 readOnly, 要么提供onChange */}
            {/*
                表单与数据的绑定方式
                一: 通过事件e
                二: 定义ref获取该dom元素
             */}
            <input type="text" style={{width:"100%"}} value={this.state.msg} onChange={(e) => this.txtChanged(e)} ref="txt"/>
        </div>
    }
    clickM = (props) => {
        console.log("bindEvent..."+props)
        // 如果想为state重新赋值,不能使用this.state.*
        // 该使用 this.setState()方法,只会覆盖该键信息.
        this.state.msg="abc";
        // setState()的执行时异步的.如果想要获取到最新的state的数据,需要使用setstate的异步
        this.setState({
            msg:"module"
        }, function () {
            console.log(this.state.msg)
        })
    }
    txtChanged=(e) => {
        // 如果直接在{}中,取值 报错
        const val = e.target.value;
        this.setState({
            msg:val
        })
        console.log(e.target.value);
        console.log(this.refs.txt.value)
    }
}